<template>
    <div>
        <!--        <div class="header">-->
        <!--            <div class="title"></div>-->
        <!--        </div>-->
        <div class="popUp" v-show="showl">
            <div class="popUp-content">
                <div class="popUp-content-tabBar">
                    <div class="popUp-content-tabBar-tabList">
                        <div @click="showContent('对象属性')" :class="{ 'selectedTab': selectedTab === '对象属性' }">
                            对象属性
                        </div>
                        <div @click="showContent('关联信息')" :class="{ 'selectedTab': selectedTab === '关联信息' }">
                            关联信息
                        </div>
                        <div @click="showContent('关联对象')" :class="{ 'selectedTab': selectedTab === '关联对象' }">
                            关联对象
                        </div>
                    </div>
                    <div>
                        <div v-if="selectedTab === '对象属性'" class="xian">
                        </div>
                        <div v-if="selectedTab === '关联信息'" class="xian2">
                        </div>
                        <div v-if="selectedTab === '关联对象'" class="xian3">
                        </div>
                    </div>
                </div>
                <div v-if="selectedTab === '对象属性'" class="popUp-content-attribute">
                    <div class="popUp-content-attribute-listBox" v-for="(item, i) in listData" :key="i">
                        <div style="display: flex;align-items: center;" class="bgc">
                            <div class="popUp-content-attribute-circle"></div>
                            <div class="popUp-content-attribute-textName">{{ item.name }}</div>
                        </div>
                        <div class="popUp-content-attribute-textContent">{{ item.text }}</div>
                    </div>
                </div>
                <div v-if="selectedTab === '关联信息'" class="popUp-content-message">
                    <div class="popUp-content-message-monitor">
                        <span>· 变压器在线监测信息</span>
                    </div>
                    <div class="boxs userFlex">
                        <div class="popUp-content-message-list">
                            <div class="popUp-content-message-list-listHeader">
                                <div class="jian">监测类型</div>
                                <div class="xie">/</div>
                                <div class="zhi">值</div>
                            </div>
                            <div class="popUp-content-message-list-listContent">
                                <div class="popUp-content-message-list-listContent-rowSize"
                                     v-for="(item, index) in messageData" :key="index">
                                    <div class="one">
                                        <div class="circle">
                                        </div>
                                        <div>{{ item.name }}</div>
                                    </div>
                                    <div class="xian">/</div>
                                    <div class="zhi">{{ item.result }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="popUp-content-message-monitor" style="margin-top: 10px">
                            <span>· 图纸及文档</span>
                        </div>
                        <div class="popUp-content-message-document">
                            <div class="popUp-content-message-document-pdf" @mouseover="showPdfHover(1)"
                                 @mouseleave="hidePdfHover">
                                <div style="position: relative;">
                                    <div class="popUp-content-message-document-pdf-pdfImg pdf"></div>
                                    <div class="pdfHover" v-if="hover === 1"></div>
                                </div>
                                <div>文件名.pdf</div>
                                <div>2023-11-17</div>
                            </div>
                            <div class="popUp-content-message-document-pdf" @mouseover="showPdfHover(2)"
                                 @mouseleave="hidePdfHover">
                                <div style="position: relative;">
                                    <div class="popUp-content-message-document-pdf-pdfImg word"></div>
                                    <div class="pdfHover" v-if="hover === 2"></div>
                                </div>
                                <div>文件名.pdf</div>
                                <div>2023-11-17</div>
                            </div>
                            <div class="popUp-content-message-document-pdf" @mouseover="showPdfHover(3)"
                                 @mouseleave="hidePdfHover">
                                <div style="position: relative;">
                                    <div class="popUp-content-message-document-pdf-pdfImg xls"></div>
                                    <div class="pdfHover" v-if="hover === 3"></div>
                                </div>
                                <div>文件名.pdf</div>
                                <div>2023-11-17</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="selectedTab === '关联对象'" class="popUp-content-relevance">
                    <div class="popUp-content-relevance-monitor">
                        <span>· 异常动态监控</span>
                    </div>
                    <div class="popUp-content-relevance-table">
                        <div class="popUp-content-relevance-table-header">
                            <div>编号</div>
                            <div>异常对象</div>
                            <div>监控结果</div>
                        </div>
                        <div class="line"></div>
                        <div class="popUp-content-relevance-table-content userFlex">
                            <div class="popUp-content-relevance-table-content-list"
                                 v-for="(item, index) in stateData"
                                 :key="index"
                                 :class="{ 'normal': item.result === '正常', 'abnormal': item.result !== '正常' }">
                                <div>0{{ index + 1 }}</div>
                                <div>{{ item.name }}</div>
                                <div style="display: flex;align-items: center">
                                    <div
                                            :class="{ 'status-normal': item.result === '正常', 'status-abnormal': item.result !== '正常' }">
                                    </div>
                                    <div :class="{ 'text1': item.result === '正常', 'text2': item.result !== '正常' }">
                                        {{ item.result }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buttomTab">
            <div v-for="(perspective, index) in perspectives" :key="index" class="perspective1"
                 :class="{ active: activeTab === index }" @click="changeTab(index)">
                {{ perspective }}
            </div>
        </div>
        <div class="buttonBox">
            <div class="station" @click="goToDa('freewalk')">
                <div class="da">漫</div>
            </div>
            <div class="station" @click="goToIndex">
                <div class="stationIcon"></div>
            </div>
            <div class="station" @click="goToAAA">
                <div class="equipmentIcon"></div>
            </div>
            <div class="kaihe" v-if="kaiheOpened">
                <div class="bot">
                    <div class="kai" @click="but(0)" :class="{ 'kais': selected === 0 }"></div>
                    <div class="he" @click="but(1)" :class="{ 'hes': selected === 1 }"></div>
                    <div class="yuan"></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import {sendToUeMsg} from '@/utils/UeMessageUtils'
import {ref} from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()
const kaiheOpened = ref(false);
const selected = ref()
const showl = ref(true)
const but = (num) => {
    showl.value = false
    sendToUeMsg({
        breakdown: num,
    })
    console.log(num);
    selected.value = num
}

const goToIndex = () => {
    sendToUeMsg({
        type: 'overall',
    })
    router.push('/phone');
};

const goToDa = (tab) => {
    sendToUeMsg({
        type: tab,
    })
    router.push('/man');
}
const goToAAA = () => {
    sendToUeMsg({
        principal: '1',
    })
    showl.value = true
    kaiheOpened.value = !kaiheOpened.value;
    router.push('/find');
};

const perspectives = ref(['视角1', '视角2', '视角3', '视角4']);
const activeTab = ref(0);

const changeTab = (index) => {
    showl.value = false
    sendToUeMsg({
        changeCamera: Number(index) + 1,
    })
    activeTab.value = index;
};
// 设置状态用于控制显示哪个选项卡
const selectedTab = ref("关联对象");
// 点击选项卡时更新状态
const showContent = (tabName) => {
    selectedTab.value = tabName;
};
const hover = ref(0);

const showPdfHover = (index) => {
    hover.value = index;
};

const hidePdfHover = () => {
    hover.value = 0;
};

const listData = ref([
    {
        name: "产品名称：",
        text: "2号变压器",
    },
    {
        name: "额定电压：",
        text: "200kv",
    },
    {
        name: "联接组标号：",
        text: "123456",
    },
    {
        name: "绝缘条件：",
        text: "绝缘条件",
    },
    {
        name: "额定容量：",
        text: "220m³",
    },
    {
        name: "额定频率：",
        text: "11",
    },
    {
        name: "冷却方式：",
        text: "冷却方式",
    },
    {
        name: "产品规格：",
        text: "产品规格",
    },
    {
        name: "额定电流：",
        text: "20A",
    },
    {
        name: "分接头位置：",
        text: "分接头",
    },
    {
        name: "套管型电流互感器：",
        text: "2号变压器",
    },

]);
const stateData = ref([
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '异常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '异常'
    },

]);
const messageData = ref([
    {
        name: "高厂变氢气H2(ppm)",
        result: '3.75'
    },

    {
        name: "高厂变总烃 (ppm)",
        result: '9.41'
    },
    {
        name: "高厂变一氧化碳CO(ppm)",
        result: '761.46'
    },
    {
        name: "高厂变二氧化碳CO2(ppm)",
        result: '1357.91'
    },
    {
        name: "高厂变甲烷CH4(ppm)",
        result: '8.31'
    },
    {
        name: "高厂变乙烷C2H6(ppm)",
        result: '1.4'
    },
    {
        name: "高厂变乙炔C2H2(ppm)",
        result: '0'
    },
    {
        name: "高厂变乙烯C2H4 (ppm)",
        result: '1.7'
    },

]);
</script>

<style scoped lang="scss">
//.header {
//    width: 100vh;
//    height: 44px;
//    background: rgba(0, 0, 0, 0.6);
//    box-shadow: 0px 4px 9px 0px rgba(0, 192, 255, 0.15);
//    display: grid;
//    place-items: center;
//
//    .title {
//        width: 264px;
//        height: 16px;
//        background-image: url("../../assets/images/title.png");
//        background-size: 100% 100%;
//    }
//}

.popUp {
  width: 656px;
  height: 815px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 35px 35px 35px 35px;
  margin: 60px 0 0 27px;
  display: inline-block;
  pointer-events: all;

  &-content {
    width: 622px;
    height: 716px;
    margin: 26px 0 0 14px;

    &-tabBar {
      width: 582px;
      height: 58px;
      // margin-top: 22px;
      // margin-left: 34px;
      //   background-image: url("../assets/images/home/bgc_adorn.png");
      background-size: 100% 100%;

      &-tabList {
        width: 582px;
        height: 68px;
        margin-left: 5px;
        display: flex;
        justify-content: space-between;
        font-size: 40px;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        border-bottom: 3px solid rgba(255, 255, 255, 0.3);
      }

      .xian {
        width: 181px;
        height: 9px;
        background: #00C0FF;
        margin-top: -9px;
      }

      .xian2 {
        width: 181px;
        height: 9px;
        background: #00C0FF;
        margin-top: -9px;
        margin-left: 205px;
      }

      .xian3 {
        width: 181px;
        height: 9px;
        background: #00C0FF;
        margin-top: -9px;
        margin-left: 415px;
      }
    }

    &-attribute {
      width: 540px;
      height: 680px;
      margin-left: 15px;
      margin-top: 30px;

      &-listBox {
        display: flex;
        align-items: center;
        width: 540px;
        height: 50px;
        margin-top: 12px;
      }

      &-circle {
        width: 10px;
        height: 10px;
        background: #000000;
        border: 1.5px #00C0FF solid;
        margin-right: 18px;
      }

      &-textName {
        font-size: 35px;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);

      }

      &-textContent {
        font-size: 35px;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

    &-relevance {
      width: 607px;
      height: 659px;

      margin-top: 38px;
      margin-left: 15px;

      &-monitor {
        width: 489px;
        height: 80px;
        background: linear-gradient(90deg, rgba(105, 193, 221, 0.7) 0%, rgba(105, 193, 221, 0) 100%);
        font-size: 40px;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 80px;

        span {
          margin-left: 18px;
        }
      }

      &-table {
        width: 579px;
        height: 585px;
        margin-top: 20px;


        &-header {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 35px;
          font-family: Noto Sans SC, Noto Sans SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 50px;
          letter-spacing: 1px;

        }

        &-content {
          width: 100%;
          height: 470px;
          margin-top: 24px;

          &-list {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 35px;
            font-family: Noto Sans SC, Noto Sans SC;
            font-weight: 400;
            //padding: 0 2px 0 15px;
            margin-top: 12px;
          }

        }
      }
    }

    &-message {
      width: 607px;
      height: 660px;
      margin-top: 38px;

      &-monitor {
        width: 489px;
        height: 82px;
        background: linear-gradient(90deg, rgba(105, 193, 221, 0.7) 0%, rgba(105, 193, 221, 0) 100%);
        font-size: 40px;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 82px;
        padding-left: 30px;
        margin-bottom: 10px;
      }

      .boxs {
        width: 622px;
        height: 570px;
      }

      &-list {
        width: 100%;
        height: 570px;

        &-listHeader {
          width: 100%;
          height: 83px;
          border-bottom: 1px solid rgba(195, 210, 221, 0.2);
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 40px;
          font-family: Noto Sans SC, Noto Sans SC;
          font-weight: 400;
          color: #FFFFFF;
          letter-spacing: 1px;

          .jian {
            margin-left: 8px
          }

          .xie {
            margin-left: 220px;
          }

          .zhi {
            margin-right: 80px
          }
        }

        &-listContent {
          width: 100%;
          // height: 300px;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;

          &-rowSize {
            width: 100%;
            height: 50px;
            display: flex;
            //justify-content: space-between;
            align-items: center;
            font-size: 32px;
            font-family: Noto Sans SC, Noto Sans SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 8px;

            .one {
              display: flex;
              align-items: center;
              width: 81%;

              .circle {
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background-color: #BAE5F3;
                margin-right: 10px;
                margin-left: 10px;
              }
            }

            .xian {
              width: 10%
            }

            .zhi {
              width: 24%;
              text-align: left
            }
          }
        }
      }

      &-document {
        width: 597px;
        height: 277px;
        display: flex;
        margin-top: 10px;

        &-pdf {
          width: 100%;
          height: 100%;
          font-size: 35px;
          font-family: Noto Sans SC, Noto Sans SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.7);
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // margin-right: 47px;

          &-pdfImg {
            width: 138px;
            height: 158px;
            background-image: url("../../assets/images/pdf.png");
            background-size: 100% 100%;
            margin: 0 auto;
          }

          .word {
            background-image: url("../../assets/images/word.png");
            background-size: 100% 100%;
          }

          .xls {
            background-image: url("../../assets/images/xls.png");
            background-size: 100% 100%;
          }
        }
      }
    }


  }


}

.line {
  width: 100%;
  height: 3px;
  background-color: rgba(195, 210, 221, 0.2);
  margin-top: 10px;
}

.normal {
  color: #BAE5F3;
  // background-image: url("../assets/images/home/bgc_normal.png");
  background-size: 100% 100%;
}

.abnormal {
  color: #FF7B7B;
  // background-image: url("../assets/images/home/bgc_abnormal.png");
  background-size: 100% 100%;
}

.status-normal {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #94ffb2;
  /* 正常状态颜色：绿色 */
  margin-right: 10px;
}

.status-abnormal {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #FF7B7B;
  /* 异常状态颜色：红色 */
  margin-right: 10px;
}

.selectedTab {
  font-weight: 600;
}

.text1 {
  color: #94ffb2;
}

.text2 {
  color: #FF7B7B;
}

.userFlex {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.bgc {
  //width: 100%;
  height: 100%;
  // background-image: url("../assets/images/home/bgc1.png");
  background-size: 100% 100%;
}

.buttomTab {
  width: 823px;
  height: 109px;

  position: fixed;
  top: 60px;
  right: 41px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: all;

  .perspective1 {
    width: 184px;
    height: 109px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 35px 35px 35px 35px;
    text-align: center;
    line-height: 109px;
    font-size: 40px;
    font-family: Noto Sans SC, Noto Sans SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .active {
    background-image: url("../../assets/images/bg.png");
    background-size: 100% 100%;
  }
}

.buttonBox {
  width: 128px;
  height: 464px;
  position: fixed;
  right: 40px;
  bottom: 37px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: all;

  .station {
    width: 127px;
    height: 127px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 35px 35px 35px 35px;
    display: flex;
    align-items: center;
    justify-content: center;

    .stationIcon {
      width: 64px;
      height: 64px;
      background-image: url("../../assets/images/icon2.png");
      background-size: 100% 100%;
      margin-top: 15px;

    }

    .equipmentIcon {
      width: 64px;
      height: 64px;
      background-image: url("../../assets/images/Vectoric.png");
      background-size: 100% 100%;
      margin-top: 15px;
      z-index: 10;
    }
      .da{
          font-size: 32px;
          color: #FFF;
      }
  }
}

.kaihe {
  width: 288px;
  height: 264px;
  position: fixed;
  bottom: 20px;
  right: 63px;


  .bot {
    width: 100%;
    height: 100%;
    position: relative;

    .yuan {
      width: 239px;
      height: 216px;
      background-image: url("../../assets/images/xian.png");
      background-size: 100% 100%;
      position: absolute;
      right: 0;
      bottom: 20px;
      z-index: -3;


    }

    .kai {
      width: 115px;
      height: 115px;
      background-image: url("../../assets/images/split.png");
      background-size: 100% 100%;
      position: absolute;
      left: 31px;
      bottom: 0;

    }

    .he {
      width: 115px;
      height: 115px;
      background-image: url("../../assets/images/combine.png");
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 0;

    }

    .kais {
      width: 115px;
      height: 115px;
      background-image: url("../../assets/images/split2.png");
      background-size: 100% 100%;

    }

    .hes {
      width: 115px;
      height: 115px;
      background-image: url("../../assets/images/combine2.png");
      background-size: 100% 100%;

    }
  }


}

.pdfHover {
  width: 138px;
  height: 49px;
  background-image: url("../../assets/images/aa.png");
  background-size: 100% 100%;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 30.5px;
}
</style>